<template>
  <div>
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="名称搜索">
        <el-input v-model="name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="作者搜索">
        <el-input v-model="author" placeholder="作者"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getNov">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row v-for="(d, i) in datas" v-bind:key="i" v-if="i==0||i%3==0">
      <el-col :span="8" v-for="n in 3" v-bind:key="i+n">
        <el-card v-if="i+n-1 < datas.length" :id="`${datas[i+n-1]._id}`">
          <router-link :to="{path: 'book', query: {_id: `${datas[i+n-1]._id}`}}">
            <img :src="`/api/static/cover/${datas[i+n-1].num}.jpg`" class="image">
          </router-link>
          <div style="padding: 0.1em;">
            <el-popover
              placement="top-start"
              title="小说简介"
              width="50%"
              trigger="hover"
              :content="`${datas[i+n-1].blurb}`">
              <span slot="reference">{{datas[i+n-1].name}}</span>
            </el-popover>
            <span>{{datas[i+n-1].autor}}</span>
            <el-popover
              placement="top-start"
              title="相似小说"
              width="50%"
              trigger="hover"
              :content="`${datas[i+n-1].similar}`">
              <span slot="reference">相似小说</span>
            </el-popover>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      </el-pagination>
    </el-row>
    
  </div>

</template>

<script>

import http from '../http'

export default {
  name: 'Novel',
  data() {
    return {
      page: 1,
      count: 10,
      total: 0,
      name: '',
      author: '',
      loading: true,
      datas: []
    }
  },
    methods: {
      getNov(){
        http.post(
          '/novel', 
          {'page': this.page, 'count': this.count, 
          'q': {'name': this.name, 'author': this.author}}
        ).then(response => (
        this.datas = response.data.data.data,
        this.total = response.data.data.total
      ))
    },
    handleSizeChange(val) {
        this.count = val,
        this.getNov()
      },
      handleCurrentChange(val) {
        this.page = val,
        this.getNov()
      }
  },
  created() {
    this.getNov()
  }
  }
</script>

<style>
  .el-row {
    margin: 2em;
  }
  .el-col {
    border-radius: 0.2em;
  }

  .time {
    font-size: 1em;
    color: #999;
  }
</style>
